import React from 'react'
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    Dimensions, ImageBackground, Image,
} from 'react-native';

import screen from '../utils/screen';
import Images from '../images/Images';
import colors from '../utils/colors'; // react-native 动画库

// const Scaler = posed.View({ // 定义点击缩放
//     active: { scale: 1 },
//     inactive: { scale: 1 }
// })



const AppTabBar = props => {
    const {
        renderIcon,
        getLabelText,
        activeTintColor,
        inactiveTintColor,
        onTabPress,
        onTabLongPress,
        getAccessibilityLabel,
        navigation
    } = props

    const { routes, index: activeRouteIndex } = navigation.state
    return (
        <View style={Styles.container}>
            {routes.map((route, routeIndex) => {
                const isRouteActive = routeIndex === activeRouteIndex
                const tintColor = isRouteActive ? activeTintColor : inactiveTintColor
                return (
                    <TouchableWithoutFeedback
                        key={routeIndex}
                        style={Styles.tabButton}
                        onPress={() => {
                            onTabPress({ route })
                        }}
                        onLongPress={() => {
                            onTabLongPress({ route })
                        }}
                        accessibilityLabel={getAccessibilityLabel({ route })}
                    >
                        {route.key == 'Money' ? ( // 对特殊图标进行特殊处理
                            <View
                                style={Styles.scalerOnline}
                                pose={isRouteActive ? 'active' : 'inactive'}
                            >
                                {renderIcon({ route, focused: isRouteActive, tintColor })}

                            </View>
                        ) : ( // 普通图标普通处理
                            <View
                                style={Styles.scaler}
                                pose={isRouteActive ? 'active' : 'inactive'}
                            >
                                {renderIcon({ route, focused: isRouteActive, tintColor })}
                            </View>
                        )}
                    </TouchableWithoutFeedback>
                )
            })}
        </View>
    )
}

const Styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        height: 53,
        backgroundColor: colors.tabBgColor,
        // borderWidth: 1,
        // borderRadius: 1,
        borderColor: '#EEEEEE',
        // shadowOffset: { width: 5, height: 10 },
        shadowOpacity: 0.75,
        elevation: 1
    },
    tabButton: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    scaler: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    scalerOnline: {
        width:100,
        height:53,
        // height:screen.scaleSize(162),
        alignItems: 'center',
        justifyContent: 'flex-end',
        // backgroundColor:'#000'
    }
})

export default AppTabBar
